<template>
  <view class="container screen-width">
    <VBar :datatab="tabList" @tab="handleChange" />
    <view class="content">
      <view class="name">{{ activityInfo.title }}</view>
      <!-- <view class="content-info" v-html="activityInfo.synopsis"></view> -->
      <view class="content-info">
        <text>{{ activityInfo.synopsis }}</text>
      </view>
      <view class="time">活动时间：{{ activityInfo.beginDate }}到{{ activityInfo.endDate }}</view>
    </view>
    <view class="main_content">
      <view v-if="type == 1" class="code_img">
        <image :src="imgUrl" @longtap="toSave" />
      </view>
      <view v-if="type == 2" class="code_img">
        <image :src="imgUrl" @longtap="toSave" />
      </view>
    </view>
  </view>
</template>

<script>
import { generateQRCode,getTenantActivityInfo } from '@/util/api/activity.js'
import { isWeixin, wxShareConfig } from "util/wx.js";
export default {
  data() {
    return {
      activityInfo: {},
      imgUrl: '',
      id: '',
      type: '1', //1报名 2签到
      tabList: [
        {
          name: '报名',
          count: 0,
        },
        {
          name: '签到',
          count: 0,
        },
      ]
    }
  },
  onLoad(e) {
    if(e.type){
      this.type = e.type
    }
    this.id = e.id
    this.getDetail()
    this.generateCode()
  },
  //方法集合
  methods: {
    getDetail() {
      getTenantActivityInfo({id: this.id}).then(res=>{        
        if(res.code === 200) { 
          this.activityInfo = res.result
          if (isWeixin()) {
            this.initShareConfig()
          }
        }else{
          uni.showToast({
            title:res.message,
            icon:"none",
            duration:2000
          });
        }
      })
    },
    // 生成二维码
    generateCode() {
      let params = window.location.origin
      let url = params + '/pages/activity/Index?type=' + this.type + '&id=' + this.id
      generateQRCode({ url: url }).then(res => {
        let { result, code } = res
        if (code === 200) {
          this.imgUrl = result
        }
      })
    },
    // tab切换
    handleChange(index) {
      this.type = index + 1
      this.generateCode()
      if (isWeixin()) {
        this.initShareConfig()
      }
    },
    //保存相册
    toSave(){
      uni.getSetting({//获取用户的当前设置
          success:(res)=> {
              if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册
                  this.saveImageToPhotosAlbum();
              }else{
                  uni.authorize({//如果没有授权，向用户发起请求
                      scope: 'scope.writePhotosAlbum',
                      success:()=> {
                          this.saveImageToPhotosAlbum();
                      },
                      fail:()=>{
                          uni.showToast({
                              title:"请打开保存相册权限，再点击保存相册分享",
                              icon:"none",
                              duration:3000
                          });
                          setTimeout(()=>{
                              uni.openSetting({//调起客户端小程序设置界面,让用户开启访问相册
                                  success:(res2)=> {
                                      // console.log(res2.authSetting)
                                  }
                              });
                          },3000);
                      }
                  })
              }
          }
      })
    },
    saveImageToPhotosAlbum(){
      let base64=this.imgUrl.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
      let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
      uni.getFileSystemManager().writeFile({
          filePath:filePath ,  //创建一个临时文件名
          data: base64,    //写入的文本或二进制数据
          encoding: 'base64',  //写入当前文件的字符编码
          success: res => {
              uni.saveImageToPhotosAlbum({
                  filePath: filePath,
                  success: function(res2) {
                      uni.showToast({
                          title: '保存成功，请从相册选择再分享',
                          icon:"none",
                          duration:5000
                      })
                  },
                  fail: function(err) {
                      // console.log(err.errMsg);
                  }
              })
          },
          fail: err => {
              //console.log(err)
          }
      })
    },
    initShareConfig() {
      let windowurl = window.location.href.split("#")[0];
      let params = window.location.origin
      let url = params + '/pages/activity/Index?type=' + this.type + '&id=' + this.id
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: this.activityInfo.title,
              desc: "政策尽知 红利尽享",
              link: url
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  width: 100%;
  .name {
    margin-bottom: 20rpx;
    font-size: 20px;
    color: #1678ff;
    font-weight: 700;
    text-align: center;
  }
  .content {
    user-select: text;
    box-sizing: border-box;
    overflow: scroll;
    padding: 30rpx;
    box-sizing: border-box;
    .content-info {
      user-select: text;
      font-size: 26rpx;
      line-height: 42rpx;
      text-indent: 48rpx;
    }
    .time{
      font-size: 24rpx;
      font-weight: bold;
      margin-top: 20rpx;
    }
  }
}
  .main_content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .code_img {
      width: 440upx;
      height: 440upx;
      margin: 60upx 0;
      background-color: #fff;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .statement {
      padding: 0 34px;
      font-size: 32upx;
      color: #aaaaaa;
    }
    .btn {
      margin: 80upx auto;
      width: 290upx;
      height: 80upx;
      background-color: #1678ff;

      text-align: center;
      line-height: 80upx;
      border-radius: 10upx;
      a {
        color: #fff;
        font-size: 32upx;
      }
    }
  }
  .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #1678ff;
  height: 88upx;
  line-height: 88upx;
  color: #fff;
  text-align: center;

  a {
    color: #fff;
  }
}
</style>
